<template>
  <div class="preSuf_input" :class="hasChange ? 'hasChangeFlag' : ''">
    <a-select :placeholder="placeholderstr" v-model="day" :style="resetWidth" @change="dateChange" show-search option-filter-prop="children">
      <!-- allowClear -->
      <a-select-option v-for="(item, index) in dayMonth" :key="index" :value="item">
        {{item}}
      </a-select-option>
    </a-select>
    <span class='pre_txt'>每月</span>
    <span class='suf_txt'>日</span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      default: ''
    },
    placeholderstr: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      hasChange: false,
      day: undefined,
      defaultDate: 1,
      resetWidth: '220px',
    }
  },
  computed: {
    dayMonth () {
      let _value
      for (let i = 1; i <= 31; i++) {
        _value = i
      }
      return _value
    }
  },
  methods: {
    dateChange () {
      this.hasChange = true
      this.$emit('input', this.day)
    }
  }
}
</script>

<style lang="less" scoped>
.preSuf_input {
  .ant-select {
    position: relative;
  }
  .pre_txt {
    position: absolute;
    top: 0;
    left: 11px;
    width: 28px;
  }
  .suf_txt {
    position: absolute;
    top: 0;
    right: -189px;
  }
  /deep/.ant-select-selection__rendered {
    margin-left: 45px;
  }
  /deep/.ant-select-arrow {
    right: 30px;
  }
}

.hasChangeFlag {
  /deep/.ant-select-selection__rendered {
    padding-left: 0 !important;
  }
}
</style>